<div class="login-mask">

    <div class="login-box">

        <div class="close-login-icon " id="closeLogin"></div>


        <div class="login-option">
            <div class="selected-login-option">登录</div>
            <div>注册</div>
        </div>

        <div class="input-form">

            <div id="loginForm" class="option-form select-option-form">
                <div class="long-input">
                    <input type="text" id="loginMobile" placeholder="手机号"/>
                    <div class="phone-icon"></div>
                </div>

                <div class="long-input">
                    <input type="password" id="loginPassword" placeholder="密码"/>
                    <div class="password-icon"></div>
                </div>
                <div class="f-pw" id="fpw">忘记密码</div>
                <div class="login-btn" id="loginBtn">
                    <span>登录</span>
                    <div class="right-arrow-icon  icon"></div>
                    <div class="loading-icon icon"></div>
                </div>

            </div>

            <div id="registerForm" class="option-form">
                <div class="long-input">
                    <input type="text" id="regMobile" placeholder="手机号"/>
                    <div class="phone-icon"></div>
                </div>

                <div class="sms-field">

                    <div class="short-input">
                        <input class="sms-code" type="text" id="regSmsCode" placeholder="验证码"/>
                    </div>

                    <div class="sms-btn" id="regSmsBtn">
                        获取验证码
                    </div>

                </div>

                <div class="long-input">
                    <input type="password" id="regPassword" placeholder="密码"/>
                    <div class="password-icon"></div>
                </div>

                <div class="login-btn" id="regBtn">
                    注册
                </div>

            </div>

            <div id="resetPw" class="option-form  ">

                <div class="long-input">
                    <input type="text" id="resetMobile" placeholder="手机号"/>
                    <div class="phone-icon"></div>
                </div>

                <div class="sms-field">

                    <div class="short-input">
                        <input type="text" class="sms-code" id="resetSmsCode" placeholder="验证码"/>

                    </div>

                    <div class="sms-btn" id="resetSmsBtn">
                        获取验证码
                    </div>

                </div>

                <div class="long-input">
                    <input type="password" id="resetPassword" placeholder="密码"/>
                    <div class="password-icon"></div>
                </div>

                <div class="login-btn" id="resetBtn">
                    重置密码
                </div>

            </div>


        </div>
    </div>
</div>


<script type="text/javascript">


    //限制输入数字
    $.fn.onlyNum = function () {
        $(this).keypress(function (event) {
            var eventObj = event || e;
            var keyCode = eventObj.keyCode || eventObj.which;
            if ((keyCode >= 48 && keyCode <= 57))
                return true;
            else
                return false;
        }).focus(function () {
            //禁用输入法
            this.style.imeMode = 'disabled';
        }).bind("paste", function () {
            //获取剪切板的内容
            var clipboard = window.event.clipboardData.getData("text");
            if (/^\d+$/.test(clipboard))
                return true;
            else
                return false;
        });
    };

    $(document).ready(function (fn) {
        //todo ajax 查看申请资格
        $('.apply').click(function () {
            $('.not-qualify').fadeIn();
        })

        $('#okBtn').click(function () {
            $('.not-qualify').fadeOut();
        })


        //切换登录注册
        $('.login-option div').click(function () {
            $(this).addClass('selected-login-option').siblings('div').removeClass('selected-login-option');
            if ($(this).index() === 0) {
                $('#loginForm').fadeIn().siblings('.option-form').hide();
            } else {
                $('#registerForm').fadeIn().siblings('.option-form').hide();
            }

        });

        //验证码只能是数字
        $('.sms-code').onlyNum();

        //显示重置密码
        $('#fpw').click(function () {
            $('#resetPw').fadeIn().siblings('.option-form').hide();
        })

        //关闭登录窗口
        $('#closeLogin').click(function () {
            $('.login-mask').fadeOut();
        });

        var countdown = 60;

        //发送注册验证码
        $('#regSmsBtn').click(function () {

            if (countdown !== 60)
                return;

            var mobile = $.trim($('#regMobile').val());

            if (!checkMobile(mobile)) {
                return false;
            }

            $.ajax({
                type: 'POST',
                async: true,
                url: '/sms_verifies',
                data: {
                    mobile: mobile,
                    verify_type: 'user.register'
                },
                dataType: 'json',
                success: function (data) {
                    if (typeof(data.error) !== "undefined" && data.message !== null) {
                        toastAlert(data.message, 2);

                    } else {
                        setTime($('#regSmsBtn'));
                        toastAlert('验证码已经发送', 1);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    toastAlert(errorThrown, 2);

                }
            });
        });


        //注册用户
        $('#regBtn').click(function () {

            var mobile = $.trim($('#regMobile').val());
            var verifyCode = $.trim($('#regSmsCode').val());
            var password = $.trim($('#regPassword').val());


            //检查手机
            if (!checkMobile(mobile)) {
                return false;
            }

            //检查验证码
            if (verifyCode.length !== 4) {
                toastAlert('手机验证码为4位数字', 2);
                return false;
            }


            //检查密码
            if (!checkPassword(password)) {
                return false;
            }

            $.ajax({
                type: 'POST',
                async: true,
                url: '/register',
                data: {
                    mobile: mobile,
                    verify_code: verifyCode,
                    password: password
                },
                dataType: 'json',
                success: function (data) {
                    if (typeof(data.error) !== "undefined" && data.message !== null) {
                        toastAlert(data.message, 2);
                    } else {
                        toastAlert('注册成功,跳转中....', 1);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    toastAlert(errorThrown, 2);
                }
            })
        });


        //登录
        $('#loginBtn').click(function () {


            var mobile = $.trim($('#loginMobile').val());
            var password = $.trim($('#loginPassword').val());

            if (!checkMobile(mobile)) {
                return false;
            }

            $.ajax({
                type: 'POST',
                async: true,
                url: '/token ',
                data: {
                    mobile: mobile,
                    password: password,
                },
                dataType: 'json',
                beforeSend: function () {
                    $('#loginBtn').find('.right-arrow-icon').hide().siblings('.loading-icon').show();
                },
                success: function (data) {
                    if (typeof(data.error) !== "undefined" && data.message !== null) {
                        toastAlert(data.message, 2);
                        $('#loginBtn').find('.loading-icon').show();
                    } else {
                        data.expires_in = 1000 * data.expires_in + Date.now();

                        localStorage.setItem(
                            "token",
                            JSON.stringify(data));

                        //删除本地userid
                        localStorage.removeItem('userId');
                        toastAlert('成功登录', 1);
                        $('.login-mask').fadeOut();

                        //记录当前手机号
                        localStorage.setItem('mobile', mobile);
                        $('#account').show();
                        $('#currentAccount').text(mobile);

                    }

                    $('#loginBtn').find('.right-arrow-icon').show().siblings('.loading-icon').hide();
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    toastAlert(errorThrown, 2);
                    $('#loginBtn').find('.loading-icon').show();
                    $('#loginBtn').find('.right-arrow-icon').show().siblings('.loading-icon').hide();
                }
            });

        });


        // 发送重设密码验证码
        countdown = 60;
        $('#resetSmsBtn').click(function () {


            if (countdown !== 60)
                return;

            var mobile = $.trim($('#resetMobile').val());

            if (!checkMobile(mobile)) {
                return false;
            }

            $.ajax({
                type: 'POST',
                async: true,
                url: '/sms_verifies',
                data: {mobile: mobile, verify_type: 'user.reset.password'},
                dataType: 'json',
                success: function (data) {
                    if (typeof(data.error) !== "undefined" && data.message !== null) {
                        toastAlert(data.message, 2);

                    } else {
                        setTime($('#resetSmsBtn'));
                        toastAlert('验证码已经发送', 1);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    toastAlert(errorThrown, 2);
                }
            });
        });

        //重置密码
        $('#resetBtn').click(function () {

            var mobile = $.trim($('#resetMobile').val());
            var verifyCode = $.trim($('#resetSmsCode').val());
            var password = $.trim($('#resetPassword').val());

            //检查手机
            if (!checkMobile(mobile)) {
                return false;
            }

            //检查验证码
            if (verifyCode.length !== 4) {
                toastAlert('手机验证码为4位数字', 2);
                return false;
            }

            //检查密码
            if (!checkPassword(password)) {
                return false;
            }

            $.ajax({
                type: 'POST',
                async: true,
                url: '/reset_password',
                data: {
                    mobile: mobile,
                    verify_code: verifyCode,
                    password: password
                },
                dataType: 'json',
                success: function (data) {
                    if (typeof(data.error) !== "undefined" && data.message !== null) {
                        toastAlert(data.message, 2);
                    } else {
                        toastAlert('密码成功重置,请登录', 1);
                        $('#loginForm').fadeIn().siblings('.option-form').hide();
                    }
                },

                error: function (jqXHR, textStatus, errorThrown) {
                    toastAlert(errorThrown, 2);
                }
            })
        });


        //初始化视频
        var player = new qcVideo.Player(
            //页面放置播放位置的元素 ID
            "videoContainer",
            {
                "file_id": "14651978969256294752",
                "app_id": "1251352524",
                "auto_play": "0",
                "width": 640,
                "height": 480,
                "remember": 1,
                "stretch_full": 1,
            });
        player.resize(650.480);

        //观看视频
        $('#viewVideo').click(function () {
            $('#videoMask').fadeIn(300);
            player.play();
        })

        //关闭视频
        $('#closeVideo').click(function () {
            player.pause();
            $('#videoMask').fadeOut(300);
        })

        //启动计时器
        function setTime(obj) {
            if (countdown === 0) {
                obj.attr('disabled', false);
                obj.text('获取验证码');
                countdown = 60;
                return;
            } else {
                obj.attr('disabled', false);
                obj.text(countdown + '秒后重新发送');

            }
            countdown--;

            setTimeout(function () {
                    setTime(obj)
                }
                , 1000)
        }

        // 检查手机号
        function checkMobile(mobile) {
            var pregMobile = /^1[34578]\d{9}$/;
            if ($.trim(mobile) === '') {
                toastAlert('手机号不能为空', 2);
                return false;
            }

            if (!pregMobile.test(mobile)) {
                toastAlert('不是有效的手机号', 2);
                return false;
            }
            return true;
        }

        // 检查密码
        function checkPassword(password) {
            //字段值仅允许字母、数字、破折号（-）以及底线（_）
            var pregPassword = /^[0-9A-Za-z_-]{6,30}$/;
            if (password === '') {
                toastAlert('密码不能为空', 2);
                return false;
            }

            if (!pregPassword.test(password)) {
                toastAlert('密码长度6到10位,仅允许字母，数字，破折号，底线 ', 2);
                return false;
            }
            return true;
        }


        //提示错误信息
        //信息提示框
        function toastAlert(Msg, status) {

            if (status === 1) {
                $('#alertBox').removeClass('wrong-input').addClass('success-toast');
            }
            else {
                $('#alertBox').removeClass('success-toast').addClass('wrong-input');
            }
            $('#alertBox').text(Msg).fadeIn();

            setTimeout(function () {
                $('#alertBox').fadeOut();
            }, 2000);
        }

    });

</script>